<template>
  <div>
    createor update {{ id }}
    <el-card>
      <div slot="header" class="clearfix">
        <el-steps :active="step" simple>
          <el-step
            v-for="(item, index) of steps"
            :key="item"
            :title="item"
            @click.native="step = index"
          ></el-step>
        </el-steps>
      </div>
      <el-form :model="formData" label-width="80px">
        <div v-show="step === 0">
          <el-form-item label="名称" prop="courseName">
            <el-input
              v-model="formData.courseName"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="简介" prop="brief">
            <el-input
              v-model="formData.brief"
              type="textarea"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="讲师姓名" prop="teacherDTO.teacherName">
            <el-input
              v-model="formData.teacherDTO.teacherName"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="职位" prop="teacherDTO.position">
            <el-input
              v-model="formData.teacherDTO.position"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="讲师简介" prop="teacherDTO.description">
            <el-input
              v-model="formData.teacherDTO.description"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="课程概述" class="twoInputInOneLine">
            <el-input
              v-model="formData.previewFirstField"
              maxlength="20"
              show-word-limit
            />
            <el-input
              v-model="formData.previewSecondField"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="课程排序">
            <el-input-number v-model="formData.sortNum"> </el-input-number>
            <p>数字控制排序，数字越大越靠后</p>
          </el-form-item>
        </div>
        <div v-show="step === 1">
          <el-form-item label="课程封面" prop="courseListImg">
            <upload-a-pic v-model="formData.courseListImg" />
          </el-form-item>
          <el-form-item label="介绍封面" prop="courseImgUrl">
            <upload-a-pic v-model="formData.courseImgUrl" />
          </el-form-item>
        </div>
        <div v-show="step === 2">
          <el-form-item label="售卖价格" prop="discounts">
            <el-input v-model="formData.discounts" />
          </el-form-item>
          <el-form-item label="商品原价" prop="price">
            <el-input v-model="formData.price" />
          </el-form-item>
          <el-form-item label="销量" prop="sales">
            <el-input v-model="formData.sales" />
          </el-form-item>
          <el-form-item label="活动标签" prop="discountsTag">
            <el-input v-model="formData.discountsTag" />
          </el-form-item>
        </div>
        <div v-show="step === 3">
          <el-form-item label="限时秒杀开关" prop="activityCourse">
            <el-switch
              v-model="formData.activityCourse"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <template v-if="formData.activityCourseDTO">
            <el-form-item label="活动时间" prop="activityCourse">
              <el-date-picker
                v-model="activityCourseDTODataRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="秒杀价" prop="activityCourseDTO.amount">
              <el-input v-model="formData.activityCourseDTO.amount">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="秒杀库存" prop="activityCourseDTO.stock">
              <el-input v-model="formData.activityCourseDTO.stock">
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </template>
        </div>
        <div v-show="step === 4">
          <el-form-item label="课程详情" prop="courseDescriptionMarkDown">
            <el-input
              type="textarea"
              v-model="formData.courseDescriptionMarkDown"
            />
            <wang-editor v-model="formData.courseDescriptionMarkDown" />
          </el-form-item>
          <el-form-item label="是否发布" prop="status">
            <el-switch
              v-model="formData.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-if="step < 4" @click="goNextStep">下一步</el-button>
          <el-button v-else @click="submit" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { CourseUpdateData, getCourseById, saveOrUpdateCourse } from '@/services/course'
import { ID } from '@/types'
import UploadAPic from '@/components/UploadAPic.vue'
import WangEditor from '@/components/WangEditor/index.vue'

export default Vue.extend({
  components: { UploadAPic, WangEditor },
  name: 'course-create-or-update',
  props: ['id'],
  data () {
    return {
      step: 0,
      steps: [
        '基本信息',
        '课程封面',
        '销售信息',
        '秒杀活动',
        '课程详情'
      ],
      formData: {
        // id: '' as ID,
        courseName: 'test_lnw_course_',
        brief: 'test_lnw_course_brief',
        teacherDTO: {
          // 'id': ID;
          // 'courseId': ID;
          teacherName: 'teacherName',
          // 'teacherHeadPicUrl': string;
          position: 'position',
          description: 'description'
        },
        courseDescriptionMarkDown: 'courseDescriptionMarkDown',
        price: 11,
        discounts: 12,
        priceTag: 'priceTag',
        discountsTag: 'discountsTag',
        // 'isNew': true;
        // 'isNewDes': string;
        courseListImg: 'courseListImg',
        courseImgUrl: 'courseImgUrl',
        sortNum: 3,
        previewFirstField: 'previewFirstField',
        previewSecondField: 'previewSecondField',
        status: 0,
        sales: 4,
        activityCourse: false,
        activityCourseDTO: {
          // 'id': number;
          // 'courseId': number;
          beginTime: '2020-01-01T00:00:00.000Z',
          endTime: '2020-01-02T00:00:00.000Z',
          amount: 5,
          stock: 6
        }
      } as CourseUpdateData
    }
  },
  computed: {
    activityCourseDTODataRange: {
      get () {
        if (this.formData.activityCourseDTO) {
          return [this.formData.activityCourseDTO.beginTime, this.formData.activityCourseDTO.endTime]
        }
        return []
      },
      set (val: string[]) {
        if (this.formData.activityCourseDTO) {
          const [beginTime, endTime] = val
          this.formData.activityCourseDTO.beginTime = beginTime
          this.formData.activityCourseDTO.endTime = endTime
        }
      }
    } as any
  },
  watch: {
    'formData.activityCourse' (activityCourse) {
      if (activityCourse && !this.formData.activityCourseDTO) {
        this.formData.activityCourseDTO = {
          beginTime: '2020-01-01',
          endTime: '2020-01-02',
          amount: 5,
          stock: 6
        }
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    goNextStep () {
      if (this.step < this.steps.length - 1) {
        this.step++
      }
    },
    async loadData () {
      if (this.id) {
        const { data } = await getCourseById(this.id)
        this.formData = data.data
      }
    },
    async submit () {
      const { data } = await saveOrUpdateCourse(this.formData)
      if (data.code !== '000000') {
        this.$message.error(data.mesg)
        return
      }
      this.$message.success('提交成功')
    }
  }
})
/**
 * todo bugs:秒杀开启后提交服务端报错，原因未知
 */
</script>
<style lang="scss" scoped>
::v-deep .el-step__title {
  cursor: pointer;
}
.twoInputInOneLine ::v-deep .el-form-item__content {
  display: flex;
}
.twoInputInOneLine ::v-deep .el-input:first-child {
  margin-right: 20px;
}
</style>
